<template>
  <div class="admin-container">
    <panelGroupfrom  @handleSetLineChartData="handleSetLineChartData" />
    <lineChart :chartData = 'lineChartData' />

    <mu-row gutter>

      <mu-col style="margin:10px 0" width="100" tablet="100" desktop="33">
        <raddar-chart/>
      </mu-col>

      <mu-col style="margin:10px 0" width="100" tablet="100" desktop="33">
        <bar-chart/>
      </mu-col>

      <mu-col style="margin:10px 0" width="100" tablet="100" desktop="33">
         <pie-chart/>
      </mu-col>
     
    </mu-row>

    <mu-row style="margin: 20px 0">
      <muse-card></muse-card>
    </mu-row>
  </div>
</template>

<script>
import panelGroupfrom from './components/panel_group'
import lineChart from './components/line_chart'
import raddarChart from './components/raddar_chart'
import barChart from './components/bar_chart'
import pieChart from './components/pie_chart'
import museCard from './components/muse_card'
const lineChartData = {
  NewVisits: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  Messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  Purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  Shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
  export default {
    components:{
      panelGroupfrom,
      lineChart,
      raddarChart,
      barChart,
      pieChart,
      museCard
    },
    
    data() {
      return {
        lineChartData: lineChartData.NewVisits
      }
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      }
    },
  }
</script>

<style scoped>

</style>